<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="loading" class="settle-detail-container no-margin">
      <step
        v-if="!showMobilePage"
        :order-status="orderStatusIndex"
        :step-list="stepList"
        :mode="2"
        :is-show-correct="false"
        :index-judge="true"
      />
      <div class="settle-detail small-padding no-margin">
        <div class="detail-data" style="margin-bottom: 24px;">
          <Title title="结算单信息" style="margin-bottom:7px;"/>
          <!-- 审批通过印章 -->
          <img v-if="!isComplete && isPass && settlementData.process !== 4" :src="passIcon" class="state-icon" alt="crm">
          <!-- 被驳回印章 -->
          <img v-if="!isComplete && isBack" :src="backIcon" class="state-icon" alt="crm">
          <!-- 待封存印章 -->
          <img v-if="!isComplete && isPass && settlementData.process === 4" :src="sealIcon" class="state-icon" alt="crm">
          <!-- 完成印章 -->
          <img v-if="isComplete" :src="completeIcon" class="state-icon" alt="crm">

          <el-form :class="{'mobile-el-form': showMobilePage}" class="settle-form dividing" label-position="right" label-width="110px">
            <el-row :gutter="8" class="content">
              <el-col :span="8">
                <el-form-item label="供应商名称:">
                  <el-tooltip placement="top" effect="dark">
                    <div slot="content" style="max-width: 200px;">{{ settlementData.supplierName }}</div>
                    <span class="overflow">{{ settlementData.supplierName || '--' }}</span>
                  </el-tooltip>
                <!-- <span>{{ settlementData.supplierName || '--' }}</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称:">
                  <span>{{ settlementData.clientCompany || '--' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结算单号:">
                  <span>{{ settlementData.settleId || '--' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结算总金额(元):">
                  <span v-if="settlementData.totalPrice || settlementData.totalPrice === 0">{{ (settlementData.totalPrice/100) | moneyFilter }}元</span>
                  <span v-else>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结算总订单数:">
                  <span v-if="settlementData.orderNum || settlementData.orderNum === 0">{{ settlementData.orderNum | moneyFilter }}</span>
                  <span v-else>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结算日期:">
                  <span v-if="settlementData.settleStartTime && settlementData.settleEndTime">
                    {{ settlementData.settleStartTime | format('YYYY/MM/DD') }}至{{ settlementData.settleEndTime | format('YYYY/MM/DD') }}
                  </span>
                  <span v-else>--</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="isShowFileList" class="detail-upAttachment" style="margin-bottom: 28px;">
          <Title title="结算单据" style="margin-bottom:16px;"/>
          <div class="detail-content-item">
            <div class="label">附件:</div>
            <div class="file-content">
              <FileShowList
                v-if="settlementData.attachment && settlementData.attachment.length"
                ref="fileShowListRef"
                :file-list="settlementData.attachment"
                :show-delete="canEditFile"
                style="flex-shrink: 0;"
                is-show-single-file
                icon-show
                @removeFileList="removeFileList" />
              <div v-else-if="!canEditFile">--</div>
              <upAttachment
                v-if="canEditFile"
                ref="uploadImg"
                :import-api="'/admin/client/settlement/upload/'+settlementId"
                :hide-confirm="true"
                :hide-clip-up="false"
                :extend-params="{id: settlementId }"
                style="margin-left: 16px;"
                btn-text="上传文件"
                @upProgress="upProgress"
                @complateSetData="complateSetData"
                @removeFileList="removeFileList" />
            </div>
          </div>
        </div>
        <div class="detail-order">
          <Title title="结算订单列表" style="margin-bottom:16px;"/>
          <settleOrderList
            v-loading="orderLoading"
            :order-list="settlementData.items" />
        </div>
        <div class="detail-log">
          <Title title="操作记录" style="margin-bottom:12px;"/>
          <settleLog v-if="logData && logData.length" :log-data="logData" :class="{'mobile-settle-log':showMobilePage}"/>
          <div v-else class="empty-container">
            <img :src="emptyIcon" class="empty-img" alt="">
            <div class="empty-title">暂无数据</div>
          </div>
        </div>
      </div>
      <OpeatorBtn :settlement-id="settlementId" :detail-info="settlementData" @getData="freshData" />
    </div>
  </div>
</template>

<script>
// 组件
import Title from '@/components/Title';
import Step from '@/components/CreateOrder/orderDetail/step';
import FileShowList from '@/components/CreateOrder/fileShowList';
import upAttachment from '@/components/Common/upAttachment/index';
import settleOrderList from '@/components/Customer/detail/settleOrderList';
import settleLog from '@/components/Customer/detail/settleLog';
import OpeatorBtn from '@/components/Customer/detail/settleDetailFoot';

// 接口
import { settlementDetail, editSettlement, settlementLog, deleteFile, addFile } from '@/api/customer';
// 工具
import ElMessage from '@/utils/message';
import { moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
// img
import completeIcon from '@/assets/customer/complete.png';
import backIcon from '@/assets/customer/back.png';
import passIcon from '@/assets/customer/pass.png';
import emptyIcon from '@/assets/empty-table-data.png';
import sealIcon from '@/assets/customer/seal.png';
import { mapState } from 'vuex';

export default {
  components: { Step, Title, FileShowList, upAttachment, settleOrderList, settleLog, OpeatorBtn },
  filters: { moneyFilter, format },
  data() {
    return {
      completeIcon, backIcon, passIcon, emptyIcon,
      sealIcon,
      process: 0,
      stepList: [
        { name: '待提交', id: 3 },
        { name: '待审批', id: 0 },
        { name: '待上传', id: 1 },
        { name: '待封存', id: 4 },
        { name: '已完成', id: 2 }
      ],
      page: 1,
      perPage: 15,
      settlementData: {
        attachment: []
      },
      settlementId: '',
      loading: false,
      orderLoading: false,
      logData: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isPass() { // 通过审批
      return this.settlementData && this.settlementData.state === 1;
    },
    isBack() { // 已驳回
      return this.settlementData && this.settlementData.state === 2;
    },
    isComplete() { // 已封存
      return this.settlementData && this.settlementData.process === 2;
    },
    isShowFileList() { // 展示文件列表
      return this.settlementData.process !== 0 && this.settlementData.process !== 3;
    },
    canEditFile() {
      return this.settlementData.process === 1;
    },
    orderStatusIndex() {
      let sindex = 0;
      this.stepList.find((i, index) => {
        sindex = i.id === this.settlementData.process ? index : sindex;
      });
      return sindex;
    }
  },
  created() {
    this.settlementId = this.$route.params.id;
    this.getData();
    this.getSettlementLog();
  },
  methods: {
    freshData() {
      this.getData();
      this.getSettlementLog();
    },
    async getData(reset = false, orderFresh = false) {
      try {
        const params = {
          id: this.settlementId
        };
        if (orderFresh) {
          this.orderLoading = true;
        } else {
          this.loading = true;
        }
        const result = await settlementDetail(params);
        if (orderFresh) {
          this.orderLoading = false;
        } else {
          this.loading = false;
        }
        if (result.code === 200) {
          this.settlementData = result.data;
        }
      } catch (error) {
        if (orderFresh) {
          this.orderLoading = false;
        } else {
          this.loading = false;
        }
        console.log(error);
      }
    },
    // 上传文件
    upProgress() {
      this.createLoading = true;
    },
    // 上传成功添加附件到结算单
    complateSetData({ data, fileName }) {
      const bodyData = {
        attachment: data,
        id: this.settlementId
      };
      addFile(bodyData).then(res => {
        this.getData();
        this.getSettlementLog();
      }).catch(err => {
        console.log(err);
      });
    },
    removeFileList({ file, index }) {
      this.$confirm('是否确定删除？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false,
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon',
        center: true
      }).then(() => {
        const params = {
          url: file.url,
          id: this.settlementId
        };
        deleteFile(params).then(res => {
          if (res.code === 200) {
            this.getData();
            ElMessage.success('删除成功');
            this.getSettlementLog();
            if (this.$refs.fileShowListRef) this.$refs.fileShowListRef.closeDialog();
          }
        });
      }).catch(() => {});
    },
    async editSettlementData() {
      let orderIds = [];
      if (this.settlementData && this.settlementData.items) {
        orderIds = this.settlementData.items.map(i => i.id);
      }
      const data = {
        id: this.settlementId,
        supplierName: this.settlementData.supplierName,
        clientCompany: this.settlementData.clientCompany,
        settleStartTime: this.settlementData.settleStartTime,
        settleEndTime: this.settlementData.settleEndTime,
        attachment: this.settlementData.attachment,
        orderIds
      };
      ElMessage.success('上传成功');
      try {
        const res = await editSettlement(data);
        if (res.code === 200) {
          // ElMessage.success('上传成功');
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getSettlementLog() {
      try {
        const params = {
          id: this.settlementId
        };
        const result = await settlementLog(params);
        if (result.code === 200) {
          this.logData = result.data;
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.settle-detail-container {
  margin: 16px;
  background-color: #fff;
  min-height: calc(100vh - 116px);
}
.settle-detail {
  padding: 0 24px 55px 24px;
  &::v-deep{
    .order-detail-step {
      margin: 0;
    }
  }
}
.detail-data {
  padding-top: 16px;
  position: relative;
  .state-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 60px;
    top: 0;
  }
  &::v-deep {
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        color: #999999;
        font-size: 14px;
      }
      .el-form-item__content {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
.detail-content-item {
  display: flex;
  align-items: center;
  .label {
    color: #999999;
    font-size: 14px;
    padding-right: 12px;
    width: 100px;
    text-align: right;
  }
  .file-list {
    font-size: 14px;
  }
}
.settle-form {
  &::v-deep {
    .el-form-item {
      margin-bottom: 0px;
      .el-form-item__label {
        line-height: 30px;
      }
      .el-form-item__content {
        line-height: 30px;
      }
    }
  }
}
.file-content {
  display: flex;
  align-items: center;
}
.mobile-settle-log {
  ::v-deep .el-timeline-item__wrapper {
    .el-timeline-item__content {
      overflow: auto;
      .opeator-item {
        .price, .content {
          margin-right: 10px;
        }
      }
    }
    div, span {
      white-space: nowrap;
    }
  }
}
.empty-container {
  text-align:center;
  margin-top:50px;
  .empty-img {
    width: 120px;
  }
  .empty-title {
    font-size: 15px;
    // margin-top: 20px;
    text-align: center;
  }
}
</style>
